<!--
 * @Author: 赖钊亮
 * @Description: 注册界面
 * @Date: 2020-07-02 13:30:33
 * @LastEditTime: 2020-07-03 11:23:48
 * @LastEditors: Please set LastEditors
 * @FilePath: \mobile_item_121f:\JK\jkshopping\src\pages\my\components\register.vue
--> 
<template>
  <div>
    <van-nav-bar title="马上注册" left-text="返回" @click-left="goBack" left-arrow />
    <!-- 注册表单 -->
    <div>
      <div class="register">
        <van-form @submit="onSubmit">
          <van-cell-group>
            <van-field
              label="手机号"
              v-model="phone"
              placeholder="请输入手机号码"
              name="phone"
              :rules="[{required: true, message: '请填写手机号码'}]"
            />
          </van-cell-group>
          <van-field
            center
            clearable
            label="短信验证码"
            name="code"
            v-model="code"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请检查手机号码是否正确' }]"
          >
            <template #button>
              <van-button size="small" type="primary" @click="Code">验证码</van-button>
            </template>
          </van-field>
          <br />
          <van-button round block type="info" native-type="submit">确定</van-button>
          <br />
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/user/user.js";
export default {
  data() {
    // 注册信息数据
    return {
      phone: "",
      code: ""
    };
  },
  methods: {
    // 校验手机号码是否正确
    onSubmit(values) {
      if (/^1[3456789]\d{9}$/.test(values.phone)) {
        this.$dialog
          .alert({
            title: "注册成功"
          })
          .then(async () => {
            // let res = await this.API_login();
            // if (res.data.code === 200) {
            //   this.CHANGESIGN_TOKEN(res.data.data.access_token);
            // }
            // this.$router.push("/my");
          });

      } else {
        this.$dialog
          .alert({
            title: "注册失败"
          })
          .then(() => {});
      }
    },
    // 获取验证码接口数据
    async API_code(mobile) {
      let params = {
        mobile,
        type: 1
      };
      return await api.code(params);
    },

    // 获取验证码
    async Code() {
      let res = await this.API_code(this.phone);
      this.code = res.data.data.code;
      this.$dialog
        .alert({
          title: "验证码",
          message: this.code
        })
        .then(() => {});
    },
    // 校验验证码接口
    async API_checkCode(mobile, code) {
      let data = {
        mobile,
        code,
        type: 1
      };

      return await api.checkCode(this.qs.stringify(data));
    },

    async API_register(){
      let data = {
        mobile:"15625090443",//手机号码
        mobile_code:"5684",//验证码
        avatarUrl:"https://wx.qlogo.cn/mmopen/vi_32/HXUJmBaqCMtDHsib53UXN1aKqIctdwxfFC17kbxAeCFBNE7ovnSGYHaCuicRbUHyqJc64yyZickjNVXj5ROmsMNPg/132",//头像
        code:"033ND5he0AY8aw1eYsie07a0he0ND5hV",//二维码
        gender:1,//性别
        invite_code:"00003",//邀请码
        mobile_type:1,//1为验证码模式，2为微信获取模式
        nickName:"123"//昵称
      }
      return await api.register(this.qs.stringify(data))
    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    }
  },
  async created() {
    let res = await this.API_register()
    console.log(res)
  },
};
</script>

<style>
</style>